<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示所有的学生信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
    <style>
        .layui-form-label {
            width: 120px;
        }
        .layui-form-item .layui-input-inline {
            width: 180px;
        }
        .layui-table, .layui-table-view {
            margin: 0;
        }

        tbody .layui-table-cell {
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        tbody .layui-table-cell img {
            height: 200px;
            max-width: 160px;
        }
    </style>
</head>
<body>
<table class="layui-hide" lay-filter="table_student" id="table_student"></table>
<script type="text/html" id="filterToolBar">
    <form class="layui-form" lay-filter="form_condition">
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <div class="layui-inline" title="新增学生信息" lay-event="addStudent">
                    <i class="layui-icon layui-icon-add-1" style="font-size: 16px; color: #1E9FFF;"></i>
                </div>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <label class="layui-form-label">条件筛选</label>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" class="layui-input" placeholder="姓名">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <select id="sex" name="sex" lay-search="">
                        <option value="">性别</option>
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 475px">
                    <button class="layui-btn" type="button" lay-event="search_servlet">请求servlet查询</button>
                    <button class="layui-btn" type="button" lay-event="search_struts2">请求struts2查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-normal" lay-event="sendEmail">发送邮件</button>
                </div>
            </div>
        </div>
    </form>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','form','jquery'], function () {
        var form = layui.form
            ,table = layui.table
            , $ = layui.jquery;
        form.render();

        table.render({
            /*height: 400
            ,toolbar: 'default'*/
            toolbar: '#filterToolBar'
            , defaultToolbar: ['filter', 'print', 'exports']
            , elem: '#table_student'
            //, even: 'true'
            , url: 'getStudents'
            , cols: [[
                {field: 'stu_id', width:160, title: '学号'}
                , {field: 'name', width:160, title: '姓名'}
                , {field: 'email', width:200, title: '邮箱'}
                , {field: 'birthdate', width:200, title: '出生日期'}
                , {field: 'age', width:90, title: '年龄', sort: true}
                , {field: 'sex', width:90, title: '性别', sort: true, templet: function(d) {
                        return d.sex == 0 ? "男" : "女";
                    }
                }
                , {field: 'phone', width:200, title: '手机号码'}
                , {field: 'photo', width:200, title: '近来免冠照片', templet: function(d){
                        return "<img src='getPhoto?stu_id=" + d.stu_id + "' max-width='200' height='200'>";
                    }
                }
                , {fixed: 'right', align: 'center', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
            , limit: 20
            , limits: [5,10,15,20,25]
            , request: {
                pageName: 'currentPage'     //页码的参数名称，默认：page
                , limitName: 'currentCount' //每页数据量的参数名，默认：limit
            },
            response: {
                statusName: 'status'        //规定数据状态的字段名称，默认：code
                , statusCode: 200           //规定成功的状态码，默认：0
                , msgName: 'hint'           //规定状态信息的字段名称，默认：msg
                , countName: 'total'        //规定数据总数的字段名称，默认：count
                , dataName: 'rows'          //规定数据列表的字段名称，默认：data
            }
        });
        //监听头工具条
        table.on('toolbar(table_student)', function (obj) {
            var layEvent = obj.event;
            if (layEvent === 'search_servlet') {
                var conditions = form.val("form_condition");
                // layer.msg(JSON.stringify(conditions));
                table.reload('table_student', {
                    where: conditions //设定异步数据接口的额外参数，任意设
                    ,url: 'getStudentsByCondition'
                    ,page: {
                        currentPage: 1 //重新从第 1 页开始
                    }
                });
                form.val("form_condition", conditions);
            }
            else if (layEvent === 'search_struts2') {
                var conditions = form.val("form_condition");
                // layer.msg(JSON.stringify(conditions));
                table.reload('table_student', {
                    where: conditions //设定异步数据接口的额外参数，任意设
                    ,url: 'getStudentsByCondition.action'
                    ,page: {
                        currentPage: 1 //重新从第 1 页开始
                    }
                });
                form.val("form_condition", conditions);
            } else if (layEvent === 'sendEmail') {
                var datas = table.getData("table_student");
                // 提取条件查询出的所有邮箱
                var emails = [];
                for (var i = 0; i < datas.length; i++) {
                    emails.push(datas[i].email);
                }
                // 弹出一个邮件发送邮件的页面，并回显所有收件人邮箱
                layer.open({
                    type: 2,
                    title: ['发送邮件', 'font-size:18px'],
                    content: 'showSendEmail.html?emails=' + btoa(JSON.stringify(emails)), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    area: ['638px', '724px']
                });
            } else if (layEvent === 'addStudent') {
                layer.open({
                    type: 2,
                    title: ['新增学生信息', 'font-size:18px'],
                    content: 'showAddStudent.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    area: ['652px', '822px']
                });
            }
        });
        //监听行内工具条
        table.on('tool(table_student)', function (obj) {  //注：tool是工具条事件名，table_student是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data;                    //获得当前行数据
            var layEvent = obj.event;               //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr;                        //获得当前行 tr 的DOM对象

            if (layEvent === 'edit') { //查看
                //tr[0].cells[0].innerText可以获取表格某行的某个单元格的值
                var tr = obj.tr;
                //标注选中样式
                // obj.tr.addClass('student-table-click').siblings().removeClass('student-table-click');
                //console.log(tr);//得到当前行元素对象
                //console.log(obj.data);//得到当前行数据
                //obj.del(); //删除当前行
                //obj.update(fields) //修改当前行数据
                var stu_id = tr[0].cells[0].innerText;

                layer.open({
                    type: 2,
                    title: ['修改学生信息','font-size:18px'],
                    content: 'showEditStudent.html?stu_id=' + stu_id, //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    area: ['652px','822px']
                });
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除该学生信息么', {icon: 2}, function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post(
                        "delStudent",
                        {"stu_id": tr[0].cells[0].innerText},
                        function (data) {
                            if (data.ifSucceed) {
                                table.reload("table_student");
                                layer.msg('删除成功');
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        "json"
                    );
                });
            }
        });
    });

</script>
</body>
</html>